<template>
  <!-- pages/settle/settle.wxml -->
  <view>
    <form
      @submit="formSubmit"
      report-submit="true"
    >
      <view class="title">
        <text class="title__text">个人资料</text>
      </view>
      <view class="input">
        <!-- <i class="iconfont icon-wuliuyunshu-xianxing-" style="font-size:22px;color:#cacaca;"></i> -->
        <m-icon
          name="icontijiaodingdan-haoyou"
          size="22px"
          color="#CACACA"
        ></m-icon>
        <view class="input__item">姓名</view>
        <input
          name="name"
          placeholder="请输入你的姓名"
          style="font-size:14px;margin-left:40px"
        >
      </view>
      <view class="input">
        <m-icon
          name="icondianhua"
          size="22px"
          color="#CACACA"
        ></m-icon>
        <view class="input__item">手机号</view>
        <input
          name="mobile"
          placeholder="请输入你的手机号"
          type="number"
          maxlength="11"
          style="font-size:14px;margin-left:24px"
        >
      </view>
      <view class="input">
        <m-icon
          name="icontijiaodingdan-dizhi"
          size="22px"
          color="#CACACA"
        ></m-icon>
        <view class="input__item">地区</view>
        <input
          name="area"
          placeholder="请输入你的地址"
          style="font-size:14px;margin-left:40px"
          :value="area[0].label+' '+area[1].label+' '+area[2].label"
          disabled
          @click="areaShow=true"
        >
      </view>
      <!-- <van-popup
        :show="areaShow"
        mode="bottom"
      >
        <van-area
          :area-list="areaList"
          title=" "
          @confirm="changeArea"
          @cancel="areaShow=false"
        />
      </van-popup> -->
        <!-- result返回选中字符串 value返回选中区号数组 -->
          <w-picker
      :visible.sync="areaShow"
      mode="region"
      default-type="value"
      :hide-area="false"
      @confirm="changeArea($event, 'region')"
      @cancel="areaShow=false"
      ref="region"
    ></w-picker>
      <view class="input">
        <m-icon
          name="icontijiaodingdan-dizhi"
          size="22px"
          color="#CACACA"
        ></m-icon>
        <view class="input__item">地址</view>
        <input
          name="address"
          placeholder="请输入你的地址"
          style="font-size:14px;margin-left:40px"
        >
      </view>
      <view class="title">
        <text class="title__text">产品资料</text>
      </view>
      <view class="detail">
        <view class="detail__text">
          <m-icon
            name="iconbigeguanlitai-jinrifangke"
            size="28px"
            color="#CACACA"
          ></m-icon>
          <view class="detail__text--msg">产品信息</view>
        </view>
        <textarea
          name="productInfo"
          placeholder="请输入产品名称及详细信息"
          maxlength="-1"
          style="font-size:14px;margin-top:30rpx;width:360px"
          :show-confirm-bar="false"
        ></textarea>
      </view>
      <button
        form-type="submit"
        class="detail__button"
        style="font-size:14px"
      >立即提交</button>
    </form>
  </view>
</template>
<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    supApply
  } from "@/api/modules/resource";
  import mIcon from "@/components/m-icon/m-icon.vue";
  import wPicker from "@/components/w-picker/w-picker.vue"
  // import { areaList } from '@vant/area-data';
  @Component({
    components: {
      mIcon,
      wPicker
    }
  })
  export default class ResourceApply extends Vue {
    haSubscribed: boolean = false
    btnShow: boolean = false
    // areaList = areaList
    area: any = [
      {value: "", label: "请点击选择地区"},
      {value: "", label: ""},
      {value: "", label: ""}
    ]
    areaShow:boolean = false

    onload(options) {
      if (options.btnShow) {
        this.setData({
          btnShow: options.btnShow,
        });
      }
    }

    changeArea(e){
      let tempArr=[]
      for(const item in e.obj){
        tempArr.push(e.obj[item])
      }
      this.area = tempArr
      this.areaShow = false
    }

    async formSubmit(e) {
      await this.$store.dispatch('message/subscribe', [this.$store.state.message.type.auditMsg])
        .then(() => {
          this.setData({
            haSubscribed: true
          });
        });

      const deliveryTemplateId = await this.$store.dispatch('message/getTemplateId', this.$store.state.message.type
        .auditMsg) || null
      const {
        name,
        mobile,
        productInfo
      } = e.detail.value;
      if (!name || !mobile || !productInfo) {
        uni.showToast({
          title: "请完整填写表单",
          icon: "none",
        });
        return;
      }
      if (!this.$global.isPhone(mobile)) {
        uni.showToast({
          title: "手机号码格式不正确",
          icon: "none",
        });
        return;
      }
      const area = this.area
      const param = {
        ...e.detail.value,
        area: area[0].label+area[1].label+area[2].label,
        city: area[1].value,
        cityId: area[1].value,
        country: area[2].value,
        countryId: area[2].value,
        province: area[0].value,
        provinceId: area[0].value
      };
      param.templateId = deliveryTemplateId;
      supApply(param)
        .then(() => {
          uni.showToast({
            title: `申请成功`,
            icon: "none",
          });
        })
        .catch(err => {
          uni.showToast({
            title: `${err}`,
            icon: "none",
          });
        });
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 1500);
    }
  }
</script>
<style lang="scss" scoped>
  page {
    background-color: #F4F4F4;
  }

  .title {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 35px;

    &__text {
      font-size: 13px;
      color: #cacaca;
    }
  }

  .input {
    display: flex;
    align-items: center;
    background-color: white;
    padding-left: 20px;
    height: 55px;
    border-bottom: 1rpx solid #f1f2f6;

    &__item {
      position: relative;
      font-size: 14px;
      margin-left: 20px;
      font-weight: bold;
    }
  }

  .detail {
    background-color: white;
    padding-left: 20px;
    padding-top: 20px;
    height: 150px;
    margin-bottom: 25px;

    &__text {
      display: flex;
      align-items: center;

      &--msg {
        font-weight: bold;
        margin-left: 15px;
        position: relative;
        font-size: 14px
      }
    }

    &__button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 640rpx;
      height: 88rpx;
      margin: 0 auto;
      background-color: #fc425a;
      color: #ffffff;
      border-radius: 50rpx;
      position: fixed;
      bottom: 100rpx;
      left: 60rpx;
    }
  }
</style>